<template>
  <div style="position: relative; display: inline-block; width: 100%;">
    <div style="position: relative;">
      <CodeEditor v-model="code" :language="language" />
      <span
        style="position: absolute; right: 0px; bottom: 0px; background: #f6f8fa; border: 1px solid #dcdfe6; border-radius: 3px; padding: 2px 8px; font-size: 12px; color: #6c757d; font-family: monospace; opacity: 0.85; pointer-events: none; user-select: none; z-index: 2; padding: 0 60px;">
        json
      </span>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import CodeEditor from './Editor/CodeEditor.vue'

const code = ref(`{
  "dialogClose": "关闭对话框",
  "dialogErrorMessage": "错误",
  "dialogInfoMessage": "信息",
  "dialogPendingMessage": "正在进行",
  "dialogWarningMessage": "警告",
  "ok": "确定"
}`);

const language = ref('json');
</script>

<style scoped>
.pre-code {
  background-color: #fff;
  color: #24292e;
  display: inline-block;
  border: 1px solid #dcdfe6;
  border-radius: 3px;
  padding: 4px;
  font-weight: 900;
}
</style>
